<template>
	<s-layout title="领取记录" backgroundColor="#FFAA08" opacityBgUi="bg-wines">
		<view class="top" >

		</view>
		<view class="main">
			<view class="main-top">
				<view class="item">
					<view class="title">共领取了</view>
					<view class="num">{{state.total||0}}次</view>
				</view>

			</view>
			<s-empty v-if="state.total === 0" icon="/static/order-empty.png" text="暂无数据"></s-empty>
			<view class="list">
				<view class="item" v-for="item,index in wineList" :key="index">
					<view class="item-top">
						<view class="order">
							订单编号：{{item.order_sn}}
						</view>
						<view class="item-status">
							{{item.status_text}}
						</view>
					</view>
					<view class="item-bottom">
						<view class="item-left">
							<image class="avatar" :src="sheep.$url.cdn(item.items[0].goods_image)" mode=""></image>
							<view class="wine">
								<view class="wine-name">{{item.items[0].goods_title}} <text class="wine-num">×
										{{item.items[0].goods_num}}</text></view>
								<view class="wine-time">领取时间：{{item.items[0].createtime}}</view>
							</view>
						</view>
						<view class="item-right" @click="onOrderDetail(item.order_sn)">
							订单详情
						</view>
					</view>
				</view>
			</view>
			<uni-load-more v-if="state.total!=0" :status="state.loadStatus" :content-text="{
			    contentdown: '点击查看更多',
			  }" @tap="loadmore" />
		</view>


	</s-layout>
</template>
<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import _ from 'lodash';
	const sysStore = sheep.$store('sys');
	const sys = computed(() => sysStore);
	const wineList = ref([])
	const state = reactive({
		total: 1,
		current_page: 1,
		last_page: 1,
		loadStatus: '',
		params: {
			page: 1,
			list_rows: 10
		}
	});

	const onOrderDetail = (orderSN) => {
		sheep.$router.go('/pages/order/detail', {
			orderSN,
		});
	}

	const getList = (page = 1) => {
		sheep.$api.second.claimOrdersRecord({
			list_rows: 10,
			page
		}).then(res => {
			const {
				data: {
					data,
					total,
					current_page,
					last_page,
				}

			} = res
			wineList.value = _.concat(wineList.value, data);
			state.total = total
			state.current_page = current_page
			state.last_page = last_page
			if (state.current_page < state.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
			console.log(res, state)
		})
	}
	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			getList(state.current_page + 1);
		}
	}
	onLoad((options) => {
		getList()
	});
	// 上拉加载更多
	onReachBottom(() => {
		loadmore()
	});
</script>
<style lang="scss" scoped>
	.top {
		width: 100%;
		height: 98rpx;
		background-color: #FFAA08;
		// background-color: red;
	}

	.main {
		margin-top: -46rpx;
		padding: 0 36rpx;

		.main-top {
			padding: 20rpx 30rpx;
			background: #000000;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			display: flex;
			justify-content: space-between;

			.item {
				display: flex;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 52rpx;

				.num {
					padding-left: 80rpx;
					color: #FFAA08;
				}
			}
		}

		.my-wine {
			font-weight: 700;
			font-size: 48rpx;
			color: #000000;
			margin-left: 20rpx;
			position: relative;
			width: 100%;
			padding-top: 50rpx;

			&::before {
				content: '';
				position: absolute;
				bottom: -4px;
				left: 50%;
				transform: translateX(-50%);
				width: 138rpx;
				height: 6rpx;
				background: #FFAA08;
				border-radius: 60rpx 60rpx 60rpx 60rpx;
			}
		}

		.list {

			.item {
				display: flex;
				flex-direction: column;
				margin-bottom: 34rpx;
				padding: 14rpx 26rpx 26rpx;
				background-color: #fff;
			}

			.item-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.order {
					font-weight: 400;
					font-size: 24rpx;
					color: #555555;
				}

				.item-status {
					font-weight: 400;
					font-size: 24rpx;
					color: #FF6200;
				}
			}

			.item-bottom {
				padding-top: 26rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.item-left {
				display: flex;
				align-items: center;

				.wine {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding-left: 48rpx;

					.wine-name {
						font-size: 28rpx;
						color: #000000;
						line-height: 40rpx;
					}

					.wine-num {
						font-weight: 400;
						font-size: 24rpx;
						color: #B2B2B2;
					}

					.wine-time {
						padding-top: 4rpx;
						font-size: 20rpx;
						color: #3D3D3D;
					}
				}
			}

			.item-right {
				width: 126rpx;
				height: 52rpx;
				line-height: 52rpx;
				font-size: 20rpx;
				color: #000000;
				background: #FFFFFF;
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				border: 2rpx solid #848484;
				text-align: center;
			}



			.avatar {
				width: 120rpx;
				height: 120rpx;
				background: #D8D8D8;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
			}

		}

	}
</style>